<style>
.split {
  border: 1px solid #dcdee2;
  height: 580px;
}
.split-pane-left {
  padding: 20px 40px;
  height: 100%;
  background-color: #fff;
}
.split-pane-right {
  padding: 40px 40px;
  height: 100%;
  background-color: #fff;
}
</style>

<template>

  <div class="manage-wrap">

    <div class="split">
      <Split :value="0.5">
        <div
          slot="left"
          class="split-pane-left"
        >
          <div style="height:100px;">
            <div
              class="float-l"
              style="width:100px;text-align:center;line-height:32px;"
            > 位号编码</div>
            <div class="float-l">
              <Row>
                <Col span="4">
                <Input v-model="installCode1"></Input>
                </Col>
                <Col
                  span="1"
                  style="text-align:center;line-height:32px;"
                >
                -
                </Col>
                <Col span="4">
                <Input v-model="installCode2"></Input>
                </Col>
                <Col
                  span="1"
                  style="text-align:center;line-height:32px;"
                >
                -
                </Col>
                <Col span="4">
                <Input v-model="installCode3"></Input>
                </Col>
                <Button
                  type="warning"
                  :loading="loading"
                  @click="filterDevice"
                  style="margin-left:15px;"
                >筛选</Button>

              </Row>
            </div>
          </div>
          <Row>
            <Table
              stripe
              size="small"
              :columns="tableColums"
              :data="deviceList"
              :loading="tableLoading"
            ></Table>
          </Row>

        </div>
        <div
          slot="right"
          class="split-pane-right"
        >
          <Form
            ref="ConfigInfo"
            :model="ConfigInfo"
            :label-width="150"
            value=true
            style="padding: 3px 18px"
          >
            <Form-item label="工作状态">
              <Select
                @on-change="workStatusChange"
                v-model="ConfigInfo.workStatus"
                style="width:200px;"
              >
                <Option
                  v-for="item in workStatusList"
                  :value="item.value"
                  :key="item.value"
                >{{ item.label }}</Option>
              </Select>
            </Form-item>
            <Form-item label="每日首次上报时间">
              {{ConfigInfo.reportTime}}
            </Form-item>
            <Form-item label="每日位置上报的间隔">
              {{ConfigInfo.reportInterval}}分钟
            </Form-item>
            <Form-item label="指示灯工作时段">
              {{ConfigInfo.lampWorkPeriod}}
            </Form-item>
            <Form-item label="指示灯首次工作时间">
              {{ConfigInfo.lampFirstTime}}
            </Form-item>
            <Form-item label="指示灯工作占比">
              {{ConfigInfo.lampWorkPercent}}
            </Form-item>
            <Form-item label="指示灯休眠间隔时间">
              {{ConfigInfo.lampSleepInterval}}分钟
            </Form-item>
             <Form-item label="定位截止时间">
              {{ConfigInfo.searchLocationTime}}分钟
            </Form-item>
            <Form-item>
              <Button
                type="primary"
                :loading="loading"
                @click="save"
                style="margin-left:15px;"
                v-perms="'bss:dev:send'"
              >提交</Button>
            </Form-item>
          </Form>

        </div>
      </Split>
    </div>

  </div>

</template>

<script>
import { getInstalledDeviceList, sendConfig } from "@/api/device";
import { formatDate } from "@/libs/util";
import { paramConfigInfo } from "@/api/operate";
export default {
  data() {
    return {
      ConfigInfoParam: {
        reportTime: "0001",
        reportInterval: "0002",
        // lastCheckTime: "0003",
        // checkTimes: "0004",
        workStatus: "0005",
        lampWorkPeriod: "0006",
        lampFirstTime: "0007",
        lampWorkPercent: "0008",
        lampSleepInterval: "0009",
        searchLocationTime:"0011"
      },
      ConfigInfo: {
        reportTime: "",
        reportInterval: "",
        lastCheckTime: "",
        checkTimes: "",
        workStatus: 1,
        lampWorkPeriod: "",
        lampFirstTime: "",
        lampWorkPercent: "",
        lampSleepInterval: "",
        searchLocationTime:""
      },
      workStatusList: [
        { label: "正常状态", value: 1 },
        { label: "省电状态", value: 2 },
        { label: "待修状态", value: 3 },
        { label: "休眠状态", value: 4 }
      ],
      loading: false,
      installCode1: "",
      installCode2: "",
      installCode3: "",
      tableLoading: false,
      deviceList: [],
      tableColums: [
        {
          type: "index",
          width: 60,
          title: "序号",
          align: "center"
        },
        {
          align: "center",
          title: "位号编码",
          key: "installCode"
        },
        {
          align: "center",
          title: "SIM卡号",
          key: "sim"
        },
        {
          align: "center",
          title: "安装路段",
          key: "installRoad"
        }
      ]
    };
  },
  computed: {},
  created() {
    this.getTableList();
    this.paramConfigInfo();
  },
  mounted() {},
  methods: {
    async getTableList() {
      this.tableLoading = true;
      let params = {
        code1: this.installCode1,
        code2: this.installCode2,
        code3: this.installCode3
      };
      const result = await getInstalledDeviceList(params);
      if (result.code == 0) {
        this.deviceList = result.data;
      }
      this.tableLoading = false;
    },
    async paramConfigInfo() {
      let paramsId = this.ConfigInfo.workStatus;

      const result = await paramConfigInfo({ id: paramsId });
      if (result.code == 0) {
        if (result.data) {
          this.ConfigInfo = result.data;
        } else {
          this.$Message.warning("请到工作参数设置页面设置好参数！");
        }
      }
    },
    async save() {
          this.loading = true;
          let sendName = "工作状态设置"+formatDate(new Date());
          //$参数Id|参数值
          let command = "";
          for (var key in this.ConfigInfoParam) {
            command +=
              "$" + this.ConfigInfoParam[key] + "|" + this.ConfigInfo[key];
          }

          let list = this.deviceList.map(item => {
            return {
              sim: item.sim,
              devId: item.devId,
              command: command,
              sendName: sendName
            };
          });

          try {
            let result = await sendConfig(list);

            if (result.code == 0) {
              this.$Message.success("提交成功,请前往下发历史页面查看记录");
            } else {
              this.$Message.error(result.msg);
            }
          } catch (e) {
            this.$Message.error("服务器异常，稍后再试");
          }
          this.loading = false;
    },
    filterDevice() {
      this.getTableList();
    },
    workStatusChange() {
      this.paramConfigInfo();
    }
  }
};
</script>
